<template>
  <view class="mobile-item-container">
    <Navbar title="水果信息管理" bgColor="#fff" :h5Show="false"></Navbar>
    <view style="padding: 16px 0 10px;">
      <u-search :show-action="true" actionText="搜索" :animation="false" 
	  height="40px" v-model="params.fruitsName" @custom="handleQuery(1)" @clear="handleQuery(1)"></u-search>
    </view>
	
    <view v-if="list && list.length > 0">
		<view class="h-table h-table-primary">
			<view class="h-tr h-tr-3 h-thead">
				<view class="h-td">水果名称</view>
				<view class="h-td">单位</view>
				<view class="h-td">库存</view>
			</view>
			<view class="h-tr h-tr-3" v-for="(item, index) in list" :key="index" :isLink="true" :border="true" @click="navigateTo(item)">
				<view class="h-td">{{item.fruitsName }}</view>
				<view class="h-td">
				<dict-tag :options="dict.type.unit" :value="item.unit" type="primary"/></view>
				<view class="h-td">{{item.inventory}}</view>
			</view>
		</view>
		<uni-pagination :current="params.currentPage" :total="params.total" title="标题文字" :show-icon="true" @change="changePage" />
		<view class="btn-view">
			<view>
				<text class="example-info">当前页：{{ params.currentPage }}，总记录：{{ params.total }}条，每页：{{ params.pageSize }}条</text>
			</view>
		</view>
    </view>
	
    <u-empty v-else></u-empty>
    <FloatButton type="primary" icon="plus" @click="navigateTo" v-hasPermi="['fruits:fruitsInfo:add']"></FloatButton>
	<buttom-tabbar></buttom-tabbar>
  </view>
</template>

<script>
import * as FruitsInfoApi from '@/api/fruits/fruitsInfo'
import Navbar from '@/components/navbar/Navbar'
import FloatButton from '@/components/button/FloatButton'

export default {
  dicts: ['unit'],
  components: {
    Navbar,
    FloatButton,
  },
  data () {
    return {
      params: {
        pageNum: 0,
        pageSize: 10,
        total: 0,
        totalPage: 0,
        currentPage: 0,
	    fruitsName: "",
      },
      list: [],
	  show: false,
	  mode: 'single',
    }
  },
  onLoad () {
    this.loadData();
  },
  methods: {
    // 加载用户列表数据
    loadData () {
      const app = this
      this.params.pageNum += 1;
      this.handleQuery(this.params.pageNum)
    },
	handleQuery(pageNum) {
		this.params.pageNum = pageNum;
		 FruitsInfoApi.listFruitsInfo(this.params).then(res => {
			this.params.total=0;
			this.params.currentPage=0;
			this.params.totalPage=0;
			this.list = res.rows;
			this.show = false
			this.params.total = res.total
			this.params.totalPage = parseInt(this.params.total/this.params.pageSize)+1
			this.params.currentPage = this.params.pageNum
		})
	},
	changePage(e)
	{
		console.log(e)
		this.params.pageNum = e.current
		this.handleQuery(this.params.pageNum)
	},
    navigateTo (data) {
      if (data) {
        uni.navigateTo({ url: '/pages/fruits/fruitsInfo/edit?id=' + data.id })
      } else {
        uni.navigateTo({ url: '/pages/fruits/fruitsInfo/edit' })
      }
    }
  }
}
</script>

<style lang="scss">
	/* 引入表格样式表 */
	@import "@/lib/helang-table.scss";
	
	/* 示例样式开始 */
	.content {
		font-size: 28rpx;
		background-color: #f3f3f3;
		padding: 20rpx;
		
		.red{
			background-color: #DD524D;
			color: #fff;
			text-align: center;
		}
		
		.green{
			background-color: #42b983;
			color: #fff;
			text-align: center;
		}
		
		.blue{
			background-color: #007AFF;
			color: #fff;
			text-align: center;
		}
		
		.yellow{
			background-color: #ffaa00;
			color: #fff;
			text-align: center;
		}
		

		.itme-box {
			padding: 20rpx;
			background-color: #fff;
			margin-bottom: 20rpx;

			.title {
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				border-bottom: #e5e5e5 solid 1px;
				line-height: normal;
			}
			
			.width-fill{
				width: 100%;
			}
			
			.preview-box{
				height: 400rpx;
				box-shadow: 0 0 4px rgba(0,0,0,0.3);
			}
		}
	}
	/* 示例样式结束 */
</style>
